<template>
  <div class="select-user">
    <el-cascader
      v-model="selectData"
      :show-all-levels="false"
      :options="allDeptList"
      :props="{
        multiple: true,
        checkStrictly: false,
        emitPath:false,
        value: 'id',
        label: 'value'
      }"
      filterable
      class="legal-user-select"
      popper-class="legal-user-select"
      collapse-tags
      placeholder="请选择执行人"
      size="small"
      clearable
      @change="cascaderChanage"
    />
  </div>
</template>
<script>
import { allDeptlist } from '@/api/select';
import { handelDepartmentData } from '@/utils';
export default {
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {
      allDeptList: []
    };
  },
  computed: {
    selectData: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('change', val);
      }
    }
  },
  created() {
    this.getAllDeptList();
  },
  methods: {
    getAllDeptList() {
      allDeptlist().then(res => {
        if (res.code === 200) {
          handelDepartmentData(res.data);
          this.allDeptList = res.data;
        }
      });
    },
    cascaderChanage(value) {
      // this.$emit('change', value);
      this.$emit('removeError');
    }
  }
};
</script>

<style lang="scss" scoped>
.select-user {
  &::v-deep {
    .el-tag--info {
      color: #406EFF;
      background-color: #ecf1ff;
      display: flex;
      justify-content: center;
      align-items: baseline;
    }
    .el-cascader__tags {
      flex-wrap: nowrap;
      align-items: center;
      width: 210px;
      overflow: hidden;
      .el-tag>span{
        max-width: 140px;
      }
    }
    .legal-user-select {
      width: 240px;
      height: 32px;
      .el-input  {
        height: 32px;
        .el-input__inner {
          height: 32px !important;
        }
      }
    }
  }
}

</style>
